<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="robots" content="all" />
	<meta name="keywords" content="FLAG杯,FLAGcup,陆夫人,神奇陆夫人,bug体质,b站,bilibili" />
	<meta name="author" content="银发Victorique，svictorique@qq.com" />
	<link rel="shortcut icon" type="image/png" href="image/flagcup.png" />
	<title>FLAG杯 - 赛事赛程</title>
	<link rel="stylesheet" href="layui/css/layui.css"/>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="logo_box">
  <div class="wrap">
  	<img class="logo" src="image/flagcup.png" alt="FLAGcup" />
  </div>
</div>
<div class="nav_box">
	<div class="wrap">
		<a class="nav" href="home.html">首页</a>
		<a class="nav" href="enroll.html">报名通道</a>
		<a class="nav" href="schedule.html">赛事赛程</a>
	</div>
</div>
<div class="wrap">
	<div class="schedule content_box">
		<div class="title_box">
			<div class="icon"></div>
			<div class="title_group">
				<div class="chinese">赛事安排</div>
				<div class="english">Race course</div>
			</div>
		</div>
		<div class="content">
			<div class="date_box">
				<div class="prev"></div>
				<ul class="date_item_box noselect">
					<!-- <li	class="date_item active">6月12日<br/>星期二</li>
					<li	class="date_item">6月13日<br/>星期三</li>
					<li	class="date_item">6月14日<br/>星期四</li>
					<li	class="date_item">6月15日<br/>星期五</li>
					<li	class="date_item">6月16日<br/>星期六</li>
					<li	class="date_item">6月17日<br/>星期日</li>
					<li	class="date_item">6月18日<br/>星期一</li>
					<li	class="date_item">6月19日<br/>星期二</li>
					<li	class="date_item">6月20日<br/>星期三</li> -->
				</ul>
				<div class="next"></div>
			</div>
			<div class="item_box"></div>
			<!-- <div class="schedule_item">
				<div class="title">2018年6月12日 海选</div>
				<div class="match">
					<span class="time">全天</span><span class="info">xxx人参加海选</span>
				</div>
			</div>
			<div class="schedule_item">
				<div class="title">2018年6月13日 海选</div>
				<div class="match">
					<span class="time">全天</span><span class="info">xxx人参加海选</span>
				</div>
			</div>
			<div class="schedule_item">
				<div class="title">2018年6月14日 海选</div>
				<div class="match">
					<span class="time">全天</span><span class="info">xxx人参加海选</span>
				</div>
			</div>
			<div class="schedule_item">
				<div class="title">2018年6月15日 海选</div>
				<div class="match">
					<span class="time">全天</span><span class="info">xxx人参加海选</span>
				</div>
			</div>
			<div class="schedule_item">
				<div class="title">2018年6月16日 16进8</div>
				<div class="match">
					<span class="time">19:00</span><span class="info">XXX <span class="vs">VS</span> XXX</span>
				</div>
				<span class="line"></span>
				<span class="result">xxx晋级</span>
			</div> -->
		</div>
	</div>
</div>
<div class="footer">
	<div class="wrap">
		<ul class="nav_group">
			<li class="title">投诉建议</li>
			<li class="nav"><a href="javascript:incomplete();">举报不良信息</a></li>
			<li class="nav"><a href="javascript:incomplete();">意见反馈</a></li>
			<li class="nav"><a href="javascript:incomplete();">比赛问题</a></li>
			<li class="nav"><a href="javascript:incomplete();">报名问题</a></li>
		</ul>
		<ul class="nav_group">
			<li class="title">FLAG杯工作组</li>
			<li class="nav"><a href="javascript:incomplete();">联系我们</a></li>
			<li class="nav"><a href="javascript:incomplete();">加入我们</a></li>
			<li class="nav"><a href="javascript:incomplete();">联系方式</a></li>
		</ul>
		<div class="qr_group">
			<img class="qr_code" src="image/qr_microblog.png"/>
			<div class="title">@神奇陆夫人</div>
			<div class="label">新浪微博</div>
		</div>
		<div class="qr_group">
			<img class="qr_code" src="image/qr_flagcup.png"/>
			<div class="title">@神奇陆夫人的Flag杯</div>
			<div class="label">新浪微博</div>
		</div>
		<div class="qr_group">
			<img class="qr_code" src="image/qr_public_number.png"/>
			<div class="title">神奇的陆夫人</div>
			<div class="label">微信公众号</div>
		</div>
	</div>
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.4.1.min.js"></script>
<script type="text/javascript" src="js/prefixfree.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="layui/layui.all.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript">
var scrollParam = {};
$(function(){
	$.ajax({
		url: 'data/schedule.json',
		dataType : 'json',
		type : 'get',
		success : function(d){
			var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
			var dateItemBox = $('<ul class="date_item_box noselect"></ul>');
			var itemBox = $('<div class="item_box"></div>');
			for(var i in d){
				var date = new Date(d[i].date);
				var year = date.getFullYear();
				var month = (date.getMonth()+1); 
				var day = date.getDate();
				var week = weeks[date.getDay()];
				var curDate = new Date();
				var dateItem = $('<li class="date_item">'+month+'月'+day+'日<br/>'+week+'</li>');
				if(year == curDate.getFullYear() && (month-1) == curDate.getMonth() && day == curDate.getDate()){
					dateItem.addClass("active");
				}
				dateItemBox.append(dateItem);
				
				if(d[i]['list'] != null){
					var scheduleItem = $('<div class="schedule_item"></div>');
					scheduleItem.append('<div class="title">'+year+'年'+month+'月'+day+'日 '+d[i]['event']+'</div>');
					for(var j in d[i]['list']){
						var match = $('<div class="match"></div>');
						if(d[i]['info'] != null){
							//无对阵信息
							match.append('<span class="time">'+d[i]['list'][j]['time']+'</span><span class="info">'+d[i]['list'][j]['info']+'</span>');
							scheduleItem.append(match);
						} else {
							//包含对阵信息
							match.append('<span class="time">'+d[i]['list'][j]['time']+'</span>'+
								'<span class="info"><span class="left">'+d[i]['list'][j]['left']+'</span><span class="vs">VS</span><span class="right">'+d[i]['list'][j]['right']+'</span></span>');
							scheduleItem.append(match);
							scheduleItem.append('<span class="line"></span>');
							if(d[i]['list'][j]['result'] != null){
								scheduleItem.append('<span class="result">'+d[i]['list'][j]['result']+'</span>');
							}
						}
					}
					itemBox.append(scheduleItem);
				}
			}
			$(".item_box").replaceWith(itemBox);
			$(".date_item_box").replaceWith(dateItemBox);
			
			initScroll();
		},
		error : function(xhr, msg, e){
			errorMsg(msg);
		}
	});
	
	function initScroll(){
		scrollParam.margin = 0;
		scrollParam.width = $(".date_item_box").width();
		scrollParam.ch_len = $(".date_item").size();
		scrollParam.ch_width = $(".date_item").width() 
			+ getpxValue($(".date_item").css("margin-left")) 
			+ getpxValue($(".date_item").css("margin-right"))
			+ getpxValue($(".date_item").css("padding-left"))
			+ getpxValue($(".date_item").css("padding-right"));
		scrollParam.max = scrollParam.ch_width*scrollParam.ch_len - scrollParam.width
			+ getpxValue($(".date_box").css("padding-left")) + getpxValue($(".date_box").css("padding-right"));
		$(".prev").click(function(){
			if(scrollParam.margin < 0){
				scrollParam.margin += scrollParam.ch_width*2;
				console.log(scrollParam.margin);
				$(".date_item").eq(0).animate({"margin-left" : scrollParam.margin+"px"});
			}
		});
		$(".next").click(function(){
			if(scrollParam.margin > 0-scrollParam.max){
				scrollParam.margin -= scrollParam.ch_width*2;
				console.log(scrollParam.margin);
				$(".date_item").eq(0).animate({"margin-left" : scrollParam.margin+"px"});
			}
		});
	}
});
</script>
</body>
</html>